<template>
  <div class="popup-container">
    <!-- 顶部标题栏 -->
    <div class="header">
      <div class="header-content">
        <div class="logo">
          <div class="logo-icon">🌐</div>
          <div class="logo-text">
            <div class="app-name">请求拦截器</div>
            <div class="app-version">v1.0.0</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- 开关控制卡片 -->
      <div class="control-card">
        <div class="card-header">
          <div class="card-icon">⚡</div>
          <div class="card-title">拦截控制</div>
        </div>

        <div class="switch-container">
          <div class="switch-info">
            <div class="switch-label">启用拦截器</div>
            <div class="switch-desc">开启后可拦截和修改网络请求</div>
          </div>
          <el-switch
            v-model="extensionEnabled"
            size="large"
            :active-color="'#00d4aa'"
            :inactive-color="'#e5e7eb'"
            @change="handleSwitchChange"
          />
        </div>
      </div>

      <!-- 状态信息卡片 -->
      <div class="status-card">
        <div class="card-header">
          <div class="card-icon">📊</div>
          <div class="card-title">状态信息</div>
        </div>

        <div class="status-grid">
          <div class="status-item">
            <div class="status-label">当前网站</div>
            <div class="status-value domain">{{ currentDomain || '未知' }}</div>
          </div>

          <div class="status-item">
            <div class="status-label">运行状态</div>
            <div class="status-value" :class="extensionEnabled ? 'enabled' : 'disabled'">
              <span class="status-dot" :class="extensionEnabled ? 'active' : 'inactive'"></span>
              {{ extensionEnabled ? '已启用' : '已禁用' }}
            </div>
          </div>
        </div>
      </div>


    </div>

    <!-- 底部信息 -->
    <div class="footer">
      <div class="footer-text">
        {{ extensionEnabled ? '🟢 拦截器正在运行' : '🔴 拦截器已停止' }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElSwitch, ElMessage } from 'element-plus'

const extensionEnabled = ref(true)
const currentDomain = ref('')

// 获取当前标签页的域名
const getCurrentDomain = async () => {
  try {
    const [tab] = await chrome.tabs.query({ active: true, currentWindow: true })
    if (tab?.url) {
      const url = new URL(tab.url)
      currentDomain.value = url.hostname
    }
  } catch (error) {
    console.error('获取当前域名失败:', error)
  }
}

// 加载扩展状态
const loadExtensionState = async () => {
  try {
    const result = await chrome.storage.local.get(['extensionEnabled'])
    extensionEnabled.value = result.extensionEnabled !== false // 默认启用
  } catch (error) {
    console.error('加载扩展状态失败:', error)
  }
}

// 保存扩展状态
const saveExtensionState = async (enabled) => {
  try {
    await chrome.storage.local.set({ extensionEnabled: enabled })
  } catch (error) {
    console.error('保存扩展状态失败:', error)
  }
}

// 通知content script状态变化
const notifyContentScript = async (enabled) => {
  try {
    const [tab] = await chrome.tabs.query({ active: true, currentWindow: true })
    if (tab?.id) {
      await chrome.tabs.sendMessage(tab.id, {
        type: 'EXTENSION_STATE_CHANGED',
        enabled: enabled
      })
    }
  } catch (error) {
    console.log('通知content script失败 (可能页面未加载扩展):', error)
  }
}

// 处理开关变化
const handleSwitchChange = async (enabled) => {
  await saveExtensionState(enabled)
  await notifyContentScript(enabled)

  ElMessage({
    message: enabled ? '✅ 拦截器已启用' : '❌ 拦截器已禁用',
    type: enabled ? 'success' : 'info',
    duration: 2000
  })
}

onMounted(async () => {
  await getCurrentDomain()
  await loadExtensionState()
})
</script>

<style scoped>
.popup-container {
  width: 350px;
  height: 460px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  display: flex;
  flex-direction: column;
}

/* 顶部标题栏 */
.header {
  padding: 20px 20px 12px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo-icon {
  font-size: 32px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.logo-text {
  color: white;
}

.app-name {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 2px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.app-version {
  font-size: 12px;
  opacity: 0.8;
  font-weight: 400;
}

/* 主要内容区域 */
.main-content {
  flex: 1;
  padding: 16px;
  background: white;
  border-radius: 16px 16px 0 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 卡片通用样式 */
.control-card,
.status-card {
  background: white;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  border: 1px solid #f0f0f0;
  transition: all 0.3s ease;
}

.control-card:hover,
.status-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.card-icon {
  font-size: 20px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 8px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.card-title {
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
}

/* 开关控制 */
.switch-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.switch-info {
  flex: 1;
}

.switch-label {
  font-size: 15px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 4px;
}

.switch-desc {
  font-size: 13px;
  color: #6b7280;
  line-height: 1.4;
}

/* 状态网格 */
.status-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.status-item {
  text-align: center;
  padding: 12px;
  background: #f9fafb;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
 
}

.status-label {
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 6px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.status-value {
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.status-value.domain {
  color: #4f46e5;
  font-family: 'Monaco', 'Consolas', monospace;
  font-size: 12px;
  word-break: break-all;
}

.status-value.enabled {
  color: #059669;
}

.status-value.disabled {
  color: #dc2626;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.status-dot.active {
  background: #10b981;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
}

.status-dot.inactive {
  background: #ef4444;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.4);
}



/* 底部信息 */
.footer {
  padding: 12px 20px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  text-align: center;
}

.footer-text {
  color: white;
  font-size: 13px;
  font-weight: 500;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
</style>
